<!-- 邮寄路线 - item -->
<template>
	<div class="items-logistics">
		<div class="flex a-c items-flex c-p" @click="itemClick">
			<!-- 勾选 -->
			<div class="routes-check flex a-c j-c">
				<!-- 选中 -->
				<img v-show="item.isCarriable && itemActiveId == item.routeId" src="@/assets/images/pay/pay_success.png" class="check-yes" alt=""/>
				<!-- 未选择 -->
				<div v-show="item.isCarriable && itemActiveId != item.routeId" class="check-no check-yes"></div>
				<!-- 禁用 -->
				<div v-show="!item.isCarriable" class="check-no check-yes bg-f5f"></div>
			</div>
			<!-- 品牌信息 -->
			<div class="routes-msg flex a-c pr-10" :class="{'items-border':itemLength != (itemIndex + 1)}">
				<!-- 图片 -->
				<img class="routes-image" :src="item.brandLogoUrl" alt="" />
				<div class="pl-20">
					<!-- 名称 -->
					<div class="f-18 lin-28 ff-bold bold routes-name" :class="itemActiveId == item.routeId ? 'col-ff1' : 'col-222'">
						{{ item.name || '' }}
					</div>
					<!-- 是否推荐 -->
					<div v-if="item.recmd == 'Y'" class="mt-8 flex a-c">
						<div class="bg-222 br-1 plr-10 flex a-c j-c msg-labels">
							<img src="@/assets/images/parcel/ic-fast.png" class="ic-icon" alt="" />
							<div class="ff-regular f-12 lin-12 ml-4 col-ffd">
								{{ item.recmdReason }}
							</div>
						</div>
						<div class="ml-4 bg-e8e br-1 plr-10 flex a-c j-c msg-labels">
							<img src="@/assets/images/parcel/ic-popular-pink.png" class="ic-icon" alt="" />
							<div class="ff-regular col-222 f-12 lin-12 ml-4">
								Most Popular
							</div>
						</div>
					</div>
					<!-- 包裹长度文案 -->
					<div class="mt-8 col-888 f-12 lin-18 ff-regular">
						* {{ $t('submitParcel.packageLength') }}
						<Tooltip placement="top" max-width="500">
							<div class="package-info" slot="content">
								<div class="info-text f-12 lin-18 col-fff">
									<div>
										{{ $t('submitParcel.volumeWeight') }}：{{ item.volumeWeight }}
									</div>
									<div>
										{{ $t('submitParcel.shippingMethod') }}
									</div>
									<div>
										{{ $t('submitParcel.packageVolume', { num: item.volumeCoefficient }) }}
									</div>
								</div>
							</div>
							<div class="flex a-c j-c fz-0">
								<img src="@/assets/images/parcel/ic-questionmark-gray.png" class="questionmark-icon" alt="" />
							</div>
						</Tooltip>
					</div>
				</div>
			</div>
			<!-- 保障 -->
			<div class="routes-insure flex a-c f-12 lin-22 col-222 ff-regular" :class="{'items-border':itemLength != (itemIndex + 1)}">
				<div>
					<!-- 可投保 -->
					<div v-if="item.insure && item.insure == 'Y'" class="flex a-c">
						<Icon type="ios-checkmark-circle" color="#65D365" size="16" />
						<div class="ml-4">
							{{ $t('submitParcel.insuranceAvailable') }}
						</div>
					</div>
					<div v-if="item.tariff != 1 && item.tariffText" class="flex a-c">
						<Icon type="ios-checkmark-circle" color="#65D365" size="16" />
						<div class="ml-4">
							{{ item.tariffText }}
						</div>
					</div>
					<!-- 三角航线 -->
					<div v-if="item.triangle && item.triangle == 'Y'" class="flex a-c">
						<Icon type="ios-checkmark-circle" color="#65D365" size="16" />
						<div class="ml-4">
							{{ $t('public.triangleShippingLine') }}
						</div>
					</div>
				</div>
			</div>
			<!-- 运输费用 -->
			<div class="routes-price flex a-c tooptip-deep" :class="{'items-border':itemLength != (itemIndex + 1)}">
				<div class="col-ff1 f-24 lin-38 bold ff-bold mr-4">
					{{ userCurrency.currencySymbol }}{{ item.isCarriable ? Number(item.estTotalExpressCost) : "--" }}
				</div>
				<Tooltip placement="top" max-width="500">
					<div class="f-12 ff-regular lin-18" slot="content">
						<div class="col-fff">
							<div>
								{{ $t("estimation.estimatedCharges") }}:{{ userCurrency.currencySymbol }}{{ Number(item.estCargoExpressCost) }}
							</div>
							<div>
								{{ $t("estimation.estimatedOverLimitCharges") }}:{{ userCurrency.currencySymbol }}{{ Number(item.estSurcharge) }}
							</div>
						</div>
					</div>
					<div class="flex a-c j-c fz-0">
						<img src="@/assets/images/parcel/ic-questionmark-gray.png" class="questionmark-icon" alt="" />
					</div>
				</Tooltip>
			</div>
			<!-- 寄送周期 -->
			<div class="routes-day flex a-c col-222 f-24 lin-38 bold ff-bold tooptip-deep" :class="{'items-border':itemLength != (itemIndex + 1)}">
				<div class="mr-4">
					{{ item.minDeliveredDays }}-{{ item.maxDeliveredDays }}
				</div>
				<Tooltip v-if="item.minDeliveredDays" transfer placement="top" max-width="500">
					<div class="f-12 ff-regular" slot="content">
						<div class="col-fff f-12">
							<span>{{ $t('estimation.timeExplanation') }}</span>
						</div>
					</div>
					<div class="flex a-c j-c fz-0">
						<img src="@/assets/images/parcel/ic-questionmark-gray.png" class="questionmark-icon" alt="" />
					</div>
				</Tooltip>
			</div>
			<!-- 注意事项 -->
			<div class="routes-remark pr-10 col-888 f-14 lin-22 ff-regular flex a-c" :class="{'items-border':itemLength != (itemIndex + 1)}">
				<div class="tooptip-deep">
					<Tooltip placement="top" max-width="500">
						<div class="f-14 lin-22 ff-regular col-fff" slot="content">
							{{ item.description }}
						</div>
						<div class="remark-description c-p">
							{{ item.description }}
						</div>
					</Tooltip>
				</div>
			</div>
		</div>
		<slot></slot>
	</div>
</template>

<script>
import {
	mapState
} from "vuex";
export default {
	data() {
		return {

		}
	},
	props: {
		item: Object,
		itemIndex:{
			type:Number,
			default:0
		},
		itemLength:{
			type:Number,
			default:0
		},
		itemActiveId:{
			type:[String,Number],
			default:''
		}
	},
	computed: {
		...mapState({
			userCurrency: (state) => state.user.userCurrency
		}),
	},
	methods: {
		itemConfirm() {
			this.$emit('confirm', this.item)
		},
		itemDel(){
			this.$emit('del')
		},
		itemClick(){
			if(!this.item.isCarriable){
				return;
			}
			if(this.itemActiveId == this.item.routeId){//取消选中
				this.itemDel();
			}
			if(this.itemActiveId != this.item.routeId){//选中
				this.itemConfirm();
			}
		}
	}
}
</script>

<style lang="less" scoped>
	.items-logistics{
		.tooptip-deep /deep/ .ivu-tooltip{
			display: flex;
			align-items: center;
			justify-content: center;
		}
		width: 100%;
		.items-flex{
			width: 100%;
			height: 140px;
			&:hover{
				background: #F5F5F5;
			}
			&:hover .routes-name{
				color: #FF186B;
			}
		}
		.routes-check{
			width: 5%;
			height: 100%;
			.check-yes{
				width: 24px;
				height: 24px;
			}
			.check-no{
				border: 1px solid #E2E2E2;
				border-radius: 50%;
			}
		}
		.routes-msg{
			width: 30%;
			height: 100%;
			.routes-image{
				width: 80px;
				height: 80px;
				border-radius: 50%;
			}
			.package-info {
				max-width: 500px;
				.info-text {
					text-align: justify;
				}
			}
			.ic-icon{
				width: 16px;
				height: 16px;
			}
			.msg-labels{
				height:26px;
			}
		}
		.routes-insure{
			width: 15%;
			height: 100%;
		}
		.routes-price{
			width: 15%;
			height: 100%;
		}
		.questionmark-icon{
			width: 16px;
			height: 16px;
			vertical-align:middle;
		}
		.routes-day{
			width: 15%;
			height: 100%;
		}
		.routes-remark{
			width: 20%;
			height: 100%;
			.remark-description{
				display:-webkit-box;
				-webkit-box-orient:vertical;
				-webkit-line-clamp:5;
				overflow:hidden;
			}
		}
		.items-right{
			height: 100%;
			width: 100%;
		}
		.items-border{
			border-bottom: 1px solid #E2E2E2;
		}
		.bg-e8e{
			background: #E8E8E8;
		}
		.col-ffd{
			color:#FFD015;
		}
	}
</style>